<!-- 我的 -->
<template>
	<view class="my-container">
		<!-- 进行授权操作 -->
		<!-- <button class="my-container-btn" open-type="getUserInfo" bindgetuserinfo="getUserInfo">授权登录</button> -->
		<button v-if="!isAuthorize" class="my-container-btn" @tap="handleAuthorize">授权登录</button>
		<view v-else class="">
			<view class="my-container-swiper-box">
				<swiper class="my-container-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item class="my-container-swiper-item">
						<image class="swiper-item" src="/static/banner0.png"></image>
					</swiper-item>
					<swiper-item class="my-container-swiper-item">
						<image class="swiper-item" src="/static/banner1.png"></image>
					</swiper-item>
				</swiper>
			</view>
			<uni-card title="我的信息" class="">
				<text class="my-container-nickName">昵称：{{userInfo.nickName}}</text>
				<image class="my-container-avatar" :src="userInfo.avatarUrl" mode="aspectFit"></image>
			</uni-card>
			<uni-card title="我的服务" type="line">
				<uni-grid  :column="4" :highlight="true" :show-border="false">
					<uni-grid-item class="my-container-icon-box" @tap="handleInfo">
						<image class="my-container-icon" src="/static/image/takeaway.png" mode="aspectFit"></image>
						<!-- <uni-icons class="my-container-icon" custom-prefix="iconfont" type="icon-_waimai" size="30"></uni-icons> -->
						<view class="my-container-icon-text">外卖特权</view>
					</uni-grid-item>
					<uni-grid-item class="my-container-icon-box" @tap="handleResource">
						<image class="my-container-icon" src="/static/image/resource.png" mode="aspectFit"></image>
						<!-- <uni-icons class="my-container-icon" custom-prefix="iconfont" type="icon-gerenziliao1" size="30"></uni-icons> -->
						<view class="my-container-icon-text">个人资料</view>
					</uni-grid-item>
					<uni-grid-item class="my-container-icon-box" @tap="handleInfo">
						<image class="my-container-icon" src="/static/image/service.png" mode="aspectFit"></image>
						<!-- <uni-icons class="my-container-icon" custom-prefix="iconfont" type="icon-lianxikefu" size="30"></uni-icons> -->
						<view class="my-container-icon-text">联系客服</view>
					</uni-grid-item>
					<uni-grid-item class="my-container-icon-box" @tap="handleInfo">
						<image class="my-container-icon" src="/static/image/more.png" mode="aspectFit"></image>
						<!-- <uni-icons class="my-container-icon" custom-prefix="iconfont" type="icon-gengduofuwu2x" size="30"></uni-icons> -->
						<view class="my-container-icon-text">更多服务</view>
					</uni-grid-item>
				</uni-grid>
			</uni-card>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isAuthorize: false,
				userInfo: {}
			}
		},
		methods: {
			handleAuthorize() {
				console.log("点击了");
				//#ifdef MP-WEIXIN
				console.log("微信进入")
				uni.getUserProfile({
					desc: '用于完善资料',
					success: (res) => {
						this.isAuthorize = true
						this.userInfo = res.userInfo;  // 名字--nickName，头像--avatarUrl
						res.userInfo.gender ? this.$store.commit("setSex", "female") : this.$store.commit("setSex", "male");
						this.$store.commit('setNickName', res.userInfo.nickName);
					},
					fail: () => {
						console.log("未授权");
					}
				})
				// #endif
			},
			handleResource () {
				uni.navigateTo({
					url: '/pages/my/EditDialog'
				})
			},
			handleInfo() {
				uni.showToast({
					title: '敬请期待~',
					icon: 'none',
					duration: 2000
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.my-container {
		.my-container-btn {
			border-radius: 50%;
			height: 120px;
			width: 120px;
			line-height: 120px;
			background: green;
			color: #fff;
			margin-top: calc(50% - 46px);
		}
		.my-container-swiper-box {
			.my-container-swiper {
				.my-container-swiper-item {
					.swiper-item {
						background-size: 100%;
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.my-container-nickName {
			font-size: 15px;
			font-weight: 600;
		}
		.my-container-avatar {
			width: 60px;
			height: 60px;
			border-radius: 50%;    
			position: absolute;
			top: 2px;
			right: 0;
			z-index: 999;
		}
		.my-container-icon-box {
			text-align: center;
			.my-container-icon {
				// text-align: center;
				height: 30px;
				width: 30px;
				margin: 0 auto;
			}
			.my-container-icon-text {
				color: #333;
			}
		}
	}
</style>